<template>
  <div class='shelf-manage'>
    <div class='shelf-manage-top flex'>
      <div class='shelf-manage-top-left'>
        <div class='g-txt' >
          <img
            src='~@/assets/shelf_manage_img/shelf-status-icon-1.png'
            alt=''
          />
          <span>正常：{{ normalNum }}个</span>
        </div>
        <div class='r-txt'>
          <img
            src='~@/assets/shelf_manage_img/shelf-status-icon-0.png'
            alt=''
          />
          <span>异常：{{ abnormalNum }}个</span>
        </div>
      </div>
      <div>
        <el-button
          v-if='shelfList.length > 0'
          type='primary'
          class='chamfer-corners-8'
          @click='shelfSorting()'>
          <span class='flex flex-center'>
            货架排序
            <img
              class='btn-img'
              src='@/assets/shelf_manage_img/d-paixu.png'
              alt=''
            />
          </span>
        </el-button>
        <el-button
          type='primary'
          class='chamfer-corners-8'
          @click='openAddDialog(true)'
        >
          <span class='flex flex-center'>
            新增货架
            <img
              class='btn-img'
              src='@/assets/shelf_manage_img/d-add.png'
              alt=''
            />
          </span>
        </el-button>
      </div>
    </div>
    <div class='shelf-manage-box'>
      <div
        class='shelf-manage-content'
        v-for='(item, index) in shelfList'
        :key='index'>
        <div class='shelf-manage-content-title flex flex-a-center flex-space-between'>
          <div class='flex flex-a-center'>
            <el-popover
              :ref="'popover'+index"
              placement='bottom'
              trigger='click'
              visible-arrow
              popper-class='popper-box'
              width='280'
              @show='clickPopover(index)'>
              <div class='popper-box-items'>
                <div
                  class='item'
                  :class='{ active: popoverActive === pitem }'
                  v-for='pitem in popoverLength'
                  :key='pitem'
                  @click='changePopover(pitem)'>
                  {{ pitem }}
                </div>
              </div>
              <el-button class='btn' @click='changeFn(index,item.id)'>确认更改</el-button>
              <div class='t-num' :id='"step"+index' slot='reference'>
                {{ item.sort }}
              </div>
            </el-popover>

            <div class='t-name'>{{ item.name }} - {{item.code}}</div>
            <div class='t-status' :class='{"r-status":!item.lineStatus}'>{{ item.lineStatus | lineStatusFiler }}</div>
            <div class='t-ip'>IP：{{ item.weighIp }}</div>
          </div>
          <div>
            <el-button type='primary' @click='openAddDialog(false,item)' style='margin-right: 10px'
                       class='chamfer-corners-8'>
              <span class='flex flex-center'>
                编辑
                <img
                  class='btn-img'
                  src='@/assets/shelf_manage_img/d-eidt.png'
                  alt=''
                />
              </span>
            </el-button>
            <el-popconfirm
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon='el-icon-info'
              icon-color='red'
              @confirm='confirmDelete(item)'
              title='是否确定删除该货架？'>
              <el-button slot='reference' type='warning' class='chamfer-corners-8'>
              <span class='flex flex-center'>
                删除
                <img
                  class='btn-img'
                  src='@/assets/shelf_manage_img/d-delete.png'
                  alt='' />
              </span>
              </el-button>
            </el-popconfirm>
          </div>
        </div>
        <div
          v-for='(layer, lindex) in item.layerList'
          :key='lindex'
          class='shelf-manage-content-layer'
        >
          <div class='shelf-manage-content-layer-item flex'>
            <div
              class='l-left flex flex-center'
              :class="lindex % 2 == 0 ? 'one' : 'two'"
            >
              {{ lindex + 1 }}层
            </div>
            <div class='l-right flex flex-a-center'>
              <div
                class='orderList'
                v-for='(position, pindex) in layer.positionList'
                :key='pindex'
              >
                <div class='orderNum'>{{ pindex + 1 }}</div>
                <div class='line'></div>
                <div class='content'>硬件信息</div>
                <img
                  src='@/assets/shelf_manage_img/modifyIcon.png'
                  alt=''
                  @click='openHardwareConfig(position,item)'
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <empty v-if='shelfList.length===0'></empty>
    <!--  新增货架  -->
    <add-shelves
      :dialogShow='addDialogVisible'
      :mainTitle='addDialogTitle'
      @dialogClose='addDialogClose'
      :edit-data='editData'
      :is-bind='isBind'
      :is-main-edit='isMainEdit'></add-shelves>
    <!-- 硬件管理弹窗 -->
    <hardware-config
      :ws-data='wsData'
      @configComplete='getList'
      :position-data='positionData'
      :show-dialog.sync='showHardwareConfig' />
  </div>
</template>

<script>
import Empty from '@/components/Empty/index.vue'
import SmartShelves from '@/components/SmartShelves/index.vue'
import addShelves from '@/views/pageAdmin/shelfManage/components/addShelves.vue'
import EditPwdDialog from '@/components/EditPwdDialog/index.vue'
import { queryList, remove, sort } from '@/api/shelfManage'
import HardwareConfig from './components/hardwareConfig.vue'

export default {
  name: 'index',
  components: {
    EditPwdDialog,
    Empty,
    SmartShelves,
    addShelves,
    HardwareConfig
  },
  data() {
    return {
      // 新增货架弹出框
      addDialogVisible: false,
      // 新增货架弹出框title
      addDialogTitle: '新增货架',
      // 编辑货架数据
      editData: {},
      // 是否是编辑主货架
      isMainEdit: false,
      // 货架列表
      shelfList: [],
      // 货架总数
      shelfTotal: 0,
      // 搜索条件
      searchForm: {
        // 当前页
        currentPage: 1,
        // 每页显示条数
        currentSize: 10
      },
      // 弹出框active
      popoverActive: '',
      // 弹出框长度
      popoverLength: '',
      // 硬件配置弹出框
      showHardwareConfig: false,
      // 硬件配置id
      hardwareId: '',
      // 货架正常的个数
      normalNum: 0,
      // 货架异常的个数
      abnormalNum: 0,
      // 货架排序
      sortObj: {
        id: '',
        number: ''
      },
      // 库位信息
      positionData: {},
      // websocket数据
      wsData: {},
      introOption: {
        isActive: true, // 是否开始指引
        steps: [],  // steps步骤
        prevLabel: 'Back',  // back按钮
        nextLabel: '好的',   // next按钮
        skipLabel: '关闭',   // skip按钮
        doneLabel: '完成',   // finish按钮
        hidePrev: true, //是否在第一步隐藏上一步
        hideNext: true, // 是否在最后一步隐藏下一步
        nextToDone: false, //是否将下一步按钮 改为最后一步
        tooltipPosition: 'bottom', //引导说明框相对高亮说明区域的位置
        tooltipClass: 'intro-tooltip', //引导说明文本框的样式
        buttonClass: 'intro-btn',//引导说明按钮的样式
        progressBarAdditionalClass: 'intro-progress',//引导说明进度条的样式
        highlightClass: 'intro-highlight', // 说明高亮区域的样式
        exitOnEsc: true, // 是否使用键盘Esc退出
        exitOnOverlayClick: true, //是否允许点击空白处退出
        showStepNumbers: false, //是否显示说明的数据步骤
        keyboardNavigation: true, // 是否允许键盘来操作
        showButtons: true, // 是否按键来操作
        showBullets: false, // 是否使用点显示进度
        showProgress: false, // 是否显示进度条
        scrollToElement: false, // 是否滑动到高亮的区域
        overlayOpacity: 0.9, // 遮罩层的透明度
        positionPrecedence: ['bottom', 'top', 'right', 'left'], // 当位置选择自动的时候，位置排列的优先级
        disableInteraction: false, // 是否禁止与元素的相互关联
        helperElementPadding: 4 //提示边框的padding
      },
      // 是否绑定物料
      isBind: false
    }
  },
  filters: {
    lineStatusFiler(val) {
      return val ? '正常' : '异常'
    }
  },
  computed: {},
  watch: {},
  methods: {
    initStep() {
      // 绑定对应标签元素的选择器数组（对应的步骤）
      this.introOption.steps = [
        {
          title: '排序指引', //这里是可以定义指引框标题
          element: '#step0',
          intro: '点击货架序号，可以对货架进行排序。'
        }
      ]
      this.$intro().setOptions(this.introOption)
        // 点击结束按钮后执行的事件
        .oncomplete(() => {})
        // 点击跳过按钮后执行的事件
        .onexit(() => {})
        // 确认完毕之后执行的事件
        .onbeforeexit(() => {})
        //改变就会执行的事件
        .onchange(function(res) {

        }).start()
    },
    // 接收websocket消息
    operateMessage(wsData) {
      if (JSON.parse(wsData.data).type !== 'single_weight') return
      this.wsData = JSON.parse(wsData.data)
    },
    // 获取货架列表
    getList() {
      const loading = this.$loading({
        lock: true,
        text: '拼命加载中...',
        background: 'rgba(0, 0, 0, 0.6)'
      })
      queryList().then(res => {
        this.shelfList = res.result
        this.popoverLength = res.result.length
        this.normalNum = res.result.filter(item => item.lineStatus === true).length
        this.abnormalNum = res.result.filter(item => item.lineStatus === false).length
        loading.close()
      }).catch(err => {
        loading.close()
      })

    },
    // 删除货架
    confirmDelete(item) {
      remove([item.id]).then(res => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getList()
      })
    },
    // 打开新增货架弹出框
    openAddDialog(isAdd, data = {}) {
      this.isBind = data.isBind;
      this.addDialogTitle = isAdd ? '新增货架' : '编辑货架'
      if (!isAdd) {
        this.isMainEdit = true
        this.editData = { ...data }
      }

      this.addDialogVisible = true
    },
    // 新增货架关闭
    addDialogClose(falg, falg2) {
      this.isMainEdit = false
      this.editData = {}
      this.addDialogVisible = false
      if (falg2) {
        this.getList()
      }
    },
    // 点击货架排序按钮
    shelfSorting() {
      // 挂载完以后再调用
      this.initStep();
    },
    // 点击序号时事件
    clickPopover(i) {
      this.popoverActive = i + 1
    },
    // 点击序号item进行样式切换
    changePopover(i) {
      this.popoverActive = i
    },
    // 切换序号【确认更改】事件
    changeFn(index, id) {
      if (index + 1 === this.popoverActive) {
        document.body.click()
        return
      }
      this.sortObj.id = id
      this.sortObj.number = this.popoverActive
      sort(this.sortObj).then(res => {
        this.$message({
          type: 'success',
          message: '更改成功!'
        })
        document.body.click()
        this.getList()
      })

    },
    // 打开硬件信息弹窗
    openHardwareConfig(position,item) {
      if (!item.lineStatus) return this.$message.error('货架异常，无法配置硬件信息')
      this.positionData = position
      this.showHardwareConfig = true
    }
  },
  created() {
  },
  mounted() {
    this.$eventBus.$on('socketMsg', this.operateMessage)
    this.getList()
  },
  beforeDestroy() {
    this.$eventBus.$off('socketMsg', this.operateMessage)
  }
}
</script>

<style scoped lang='scss'>
@import '@/styles/_handle.scss';
.shelf-manage {
  width: 100%;

  &-top {
    @include background('shelf_top_bg_color');
    height: 70px;
    -webkit-clip-path: polygon(25px 0, 100% 0, 100% 100%, 0 100%, 0 25px);
    clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%, 0 30px);
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin-top: 5px;

    .shelf-manage-top-left {
      display: flex;

      .g-txt,
      .r-txt {
        display: flex;
        align-items: center;
        font-size: 20px;
        margin-left: 20px;

        img {
          margin-top: 2px;
          margin-right: 2px;
          width: 20px;
          height: 18px;
        }
      }

      .r-txt {
        color: #ff0f27;
      }

      .g-txt {
        color: #10e57f;
      }
    }
  }

  &-box {
    padding: 0 20px 20px 20px;
  }

  &-content {
    width: 100%;
    margin-bottom: 20px;
    margin-top: 20px;
    padding-bottom: 15px;
    @include background('shelf_bg_color');
    opacity: 1;
    border: 1px solid;
    @include border_image('shelf_border_color');
    clip-path: polygon(
        10px 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        10px 100%,
        0 calc(100% - 10px),
        0 10px
    );

    &-title {
      height: 72px;
      @include background('shelf_title_bg_color');
      opacity: 1;
      font-size: 18px;
      padding: 0 18px 0 6px;
      margin-bottom: 14px;
      border: 1px solid;
      @include border_image('shelf_title_border_color');

      clip-path: polygon(
          10px 0,
          calc(100% - 10px) 0,
          100% 10px,
          100% calc(100% - 10px),
          calc(100% - 10px) 100%,
          10px 100%,
          0 calc(100% - 10px),
          0 10px
      );

      .t-num {
        width: 58px;
        height: 58px;
        line-height: 58px;
        text-align: center;
        margin-left: 10px;
        user-select: none;
        cursor: pointer;
        margin-right: 20px;
        padding-left: 15px;
        @include background-image('shelf_title_t_num_bg_color');
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      .t-name {
        font-size: 24px;
        min-width: 80px;
        margin-right: 20px;
      }

      .t-status {
        color: #3dffa2;
        margin-right: 20px;
      }

      .r-status {
        color: #ff0f27;
      }

    }

    &-layer {
      text-align: center;
      font-size: 16px;
      padding: 2px 10px;

      &-item {
        .l-left {
          width: 75px;
        }

        .l-right {
          display: flex;
          align-items: center;
          margin-left: 28px;
          flex: 1;
          flex-wrap: wrap;
          padding: 20px 0;

          .orderList {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 18%;
            height: 40px;
            line-height: 40px;
            margin-left: 8px;
            padding: 0 16px;
            @include background_color('shelf_order_item_bg_color');
            clip-path: polygon(
                10px 0,
                calc(100% - 10px) 0,
                100% 10px,
                100% calc(100% - 10px),
                calc(100% - 10px) 100%,
                10px 100%,
                0 calc(100% - 10px),
                0 10px
            );

            .orderNum {
              font-size: 24px;
            }

            .line {
              width: 1px;
              height: 28px;
              background: rgba(255, 255, 255, 0.1);
            }

            .content {
              font-size: 18px;
            }

            img {
              cursor: pointer;
              width: 16px;
              height: 15px;
            }

            &:nth-child(n + 6) {
              margin-top: 8px;
            }
          }
        }
      }

      .one {
        @include background('shelf_layers_bg_color_1');
        clip-path: polygon(
            8px 0,
            calc(100% - 8px) 0,
            100% 8px,
            100% calc(100% - 8px),
            calc(100% - 8px) 100%,
            8px 100%,
            0 calc(100% - 8px),
            0 8px
        );
      }

      .two {
        @include background('shelf_layers_bg_color_2');
        clip-path: polygon(
            8px 0,
            calc(100% - 8px) 0,
            100% 8px,
            100% calc(100% - 8px),
            calc(100% - 8px) 100%,
            8px 100%,
            0 calc(100% - 8px),
            0 8px
        );
      }
    }
  }
}
</style>
<!-- 弹出框只能放到全局样式中，放到scoped里无效 -->
<style lang='scss'>
@import '@/styles/_handle.scss';

.popper-box {
  @include background('popper_bg_color');
  text-align: center !important;
  border: none !important;
  clip-path: polygon(
      6px 0,
      calc(100% - 6px) 0,
      100% 6px,
      100% calc(100% - 6px),
      calc(100% - 6px) 100%,
      6px 100%,
      0 calc(100% - 6px),
      0 6px
  );
  padding: 8px;

  &-items {
    display: flex;
    flex-wrap: wrap;
    min-height: 50px;
    max-height: 105px;
    overflow-y: auto;

    .item {
      width: 40px;
      height: 40px;
      line-height: 38px;
      text-align: center;
      font-size: 18px;
      margin: 5px;
      border-radius: 8px;
      border: 1px solid #fff;
      cursor: pointer;
      color: #fff;
      background: rgba(198, 221, 245, 0.1);
    }
  }

  .active {
    @include background_color('popper_select_color');
    @include font_color('popper_select_font_color');
  }

  .btn {
    width: 108px;
    @include background('popper_btn_color');
    font-size: 18px;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    margin-top: 16px;
  }
}
</style>
